<template>
    <div>
        <div class="bs-workmain-fixednew"
             @click="flag=!flag"
             v-if="flag">
        </div>
        <div class='bs-workmain-ss_menu'
             @mousedown="down"
             @touchstart="down"
             @mousemove="move"
             @touchmove.prevent="move"
             @mouseup="end"
             @touchend="end"
             ref="moveDiv">
            <div class="bs-workmain-firstList unclickable"
                 :class="flag?'bs-workmain-firstListnew':''"
                 @click="goBack">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../../assets/return.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">返回</div>
            </div>
            <div class="bs-workmain-firstList unclickable"
                 :class="flag?'bs-workmain-twoList':''"
                 @click="$router.push('/epidemicFKEntery')">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../../assets/home.png">
                </div>
                <div class="bs-workmain-f-word"
                     v-if="flag">首页</div>
            </div>
            <div v-if="addPath"
                 class="bs-workmain-firstList"
                 :class="flag?'bs-workmain-threeList':''"
                 @click="handleAdd(addPath)">
                <div class="bs-workmain-f-icon">
                    <img class="bs-workmain-img"
                         src="../../assets/add1.png">
                </div>
                <!-- <div class="bs-workmain-f-word"
                     v-if="flag">登记隐患</div> -->
            </div>
            <div class='bs-workmain-share'
                 data-rot='180'
                 @click="flag = !flag">
                <img class="bs-workmain-img"
                     src="../../assets/menu.png">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'myMenu',
    data () {
        return {
            showPositionValue: false,
            flag: false,
            flags: false,
            position: { x: 0, y: 0 },
            nx: '',
            ny: '',
            dx: '',
            dy: '',
            xPum: '',
            yPum: ''
        }
    },
    props: {
        backPath: {
            default: ''
        },
        addPath: {
            default: ''
        }

    },
    methods: {
        handleAdd (addPath) {
            if (typeof (addPath) === 'boolean') {
                this.flag = false
                this.$emit('showRiskList')
            } else {
                this.$router.push(addPath)
            }
        },
        goBack () {
            this.$emit('clickBack')
            if (this.backPath) {
                this.$router.replace(this.backPath)
            } else {
                this.$router.go(-1)
            }
        },
        down () {
            this.flags = true
            var touch
            if (event.touches) {
                touch = event.touches[0]
            } else {
                touch = event
            }
            this.position.x = touch.clientX
            this.position.y = touch.clientY

            this.dx = this.$refs.moveDiv.offsetLeft
            this.dy = this.$refs.moveDiv.offsetTop
        },
        move () {
            if (this.flags) {
                var touch
                if (event.touches) {
                    touch = event.touches[0]
                } else {
                    touch = event
                }
                this.nx = touch.clientX - this.position.x
                this.ny = touch.clientY - this.position.y
                this.xPum = this.dx + this.nx
                this.yPum = this.dy + this.ny
                console.log(this.xPum)
                if (this.xPum < 0 || this.xPum > window.screen.width - 50) {
                    return false
                }
                if (this.yPum < 0 || this.yPum > window.screen.height - 50) {
                    return false
                }
                this.$refs.moveDiv.style.left = this.xPum + 'px'
                this.$refs.moveDiv.style.top = this.yPum + 'px'
                // 阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
                document.addEventListener('touchmove', this.preventDefaultFn, { passive: false })
            }
        },
        // 鼠标释放时候的函数
        end () {
            this.flags = false
            document.removeEventListener('touchmove', this.preventDefaultFn, { passive: false })
        },
        preventDefaultFn () {
            event.preventDefault()
        }
    }
}
</script>
<style scoped lang="less">
@workmain-prefix: bs-workmain;
@bgcolor: #2269ff;
.@{workmain-prefix} {
    &-number-show {
        position: absolute;
        top: -8px;
        right: -8px;
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: #ff0000;
        color: #fff;
        font-size: 10px;
        text-align: center;
        line-height: 15px;
    }
    &-img {
        width: 100%;
        height: 100%;
    }
    &-Ibottom {
        font-size: 12px;
        text-align: center;
        line-height: 14px;
        margin-top: 7px;
    }
    &-fixednew {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 6 !important;
        background-color: rgba(0, 0, 0, 0.5);
    }
    &-ss_menu {
        bottom: 75px;
        width: 50px;
        height: 50px;
        color: #fff;
        position: fixed;
        // transition: all 1s ease;
        right: 30px;
        z-index: 8 !important;
        filter: url(#goo);
    }
    &-share {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        padding: 13px;
        background-color: @bgcolor;
        border-radius: 50%;
        padding: 13px;
    }
    &-firstList {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        transition: all 0.3s ease;
    }
    &-f-icon {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        border: 1px solid @bgcolor;
        padding: 13px;
        background-color: #fff;
    }
    &-f-word {
        width: 70px;
        color: #fff;
        text-align: center;
        font-size: 13px;
        height: 13px;
        line-height: 13px;
        margin-top: 6px;
        transform: translate(-10px 0);
    }
    &-firstListnew {
        top: -80px;
        left: 0;
    }
    &-twoList {
        top: 0px;
        left: -65px;
    }
    &-threeList {
        top: 65px;
        left: 0;
    }
    &-itemList--new {
        margin-bottom: 0;
    }
}
</style>
